import { Directive, HostListener, ElementRef, Input } from '@angular/core';

@Directive( {
    selector: '[myHighlight]'
} )
export class HighlightDirective {

    constructor( private el: ElementRef ) {

    }
    @Input() hello:string;
    @Input('myHighlight') highlightColor: string;

    @HostListener( 'mouseenter' ) onMouseEnter() {
        this.highlight( this.highlightColor || 'red');
        console.log(this.hello);
    }

    @HostListener( 'mouseleave' ) onMouseLeave() {
        this.highlight( null );
    }

    private highlight( color: string ) {
        this.el.nativeElement.style.backgroundColor = color;
    }

}
